@charset "utf-8";
@import "../../bibi/resources/styles/#globals";

* {
	margin: 0;
	border: none 0;
	padding: 0;
	font-size: 100%;
	font-weight: inheirt;
	font-style: inherit;
}

html {
	font-size: 12px;
	@include size(100%);
	background: white;
}

body {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	margin: 10px;
	@include size(calc(100% - 20px));
}

main {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: space-between;
	@include size(auto, 100%);
	> iframe.bibi-frame:nth-of-type(1) {
		margin-bottom: 10px;
		@include size(100%, calc(50% - 5px));
		box-shadow: 0 0 0 4px rgba(hotpink,   0); animation: FLASH-R .222s linear;
	}
	> iframe.bibi-frame:nth-of-type(2) {
		@include size(calc(50% - 5px));
		box-shadow: 0 0 0 4px rgba(turquoise, 0); animation: FLASH-G .222s linear;
	}
	> iframe.bibi-frame:nth-of-type(3) {
		@include size(calc(50% - 5px));
		box-shadow: 0 0 0 4px rgba(steelblue, 0); animation: FLASH-B .222s linear;
	}
}

@keyframes FLASH-R { 7% { box-shadow: 0 0 0 4px hotpink;   } }
@keyframes FLASH-G { 7% { box-shadow: 0 0 0 4px turquoise; } }
@keyframes FLASH-B { 7% { box-shadow: 0 0 0 4px steelblue; } }
